.loader {
  display: flex;
  justify-content: center;
  width: var(--size);
  height: var(--size);
}

.text {
  color: inherit;
}

.content {
  display: grid;
  grid-template-columns: repeat(3, var(--spanSize));
  gap: var(--gapSize);
  align-items: center;
  justify-content: center;
  transform: skewX(22deg);
}

@keyframes loaderSpan {
  0% {
    transform: scaleY(0);
    opacity: 0.5;
    transform-origin: top;
  }

  40% {
    transform: scaleY(1);
    opacity: 1;
    transform-origin: top;
  }

  60% {
    transform: scaleY(1);
    opacity: 1;
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    opacity: 0.5;
    transform-origin: bottom;
  }
}

.span {
  height: 60%;
  background: currentColor;
  animation: loaderSpan 1s var(--bezierFastoutSlowin) infinite;
  transform: scaleY(0);
  transform-origin: top left;

  &:nth-child(2) {
    animation-delay: 0.1s;
  }

  &:nth-child(3) {
    animation-delay: 0.2s;
  }
}
